<template>
  <div class="dialog">
    <el-dialog
      v-if="isEditKeys"
      :title="titleText"
      :visible.sync="showDialog"
      width="35%"
      top="0"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="selectWords">
        <div class="keyw">故障关键字：</div>
        <el-select v-model="keyList" multiple placeholder="请选择" class="keys">
          <el-option
            v-for="item in keysArr"
            :key="item.hitchKeywordId"
            :label="item.hitchKeywordName"
            :value="item.hitchKeywordName"
          />
        </el-select>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
        <el-button type="primary" class="savebtn" @click="save()">保 存</el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-else
      :title="titleText"
      :visible.sync="showDialog"
      width="35%"
      top="0"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="key-con">
        <p
          v-for="(item, index) in keyList"
          :key="index"
          class="key-con-one"
        >{{ item }}</p>
        <p v-if="keyList.length === 0" class="hang-font">暂无关键字</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import faultKeyManageApi from "@/api/processing-management/equip-repair-support/fault-key-manage/index";
// import failureToReportApi from "@/api/equip-repair-manage/failure-to-report/index";
export default {
  name: "",
  components: {},
  props: {
    // 修改关键字
    isEditKeys: {
      type: Boolean,
      default: false
    },
    // 弹框名称
    titleText: {
      type: String,
      default: ""
    },
    show: {
      type: Boolean,
      default: false
    },
    editObject: {
      type: [Object],
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      showDialog: this.show,
      keysArr: [],
      keyList: []
    };
  },
  watch: {
    show(v) {
      this.showDialog = v;
      if (v) {
        this.handel();
      }
    }
  },
  created() {
    this.queryPageKeyList();
  },
  mounted() {},
  methods: {
    queryPageKeyList() {
      // 获取关键字
      let param = {
        page: 1,
        size: 1000
      };
      faultKeyManageApi.queryPageList(param).then(res => {
        if (res.code === 1) {
          let data = res.data || {};
          // this.allkeysArr = data.content || [];
          this.keysArr = data.content || [];
          console.log(this.keysArr);
        }
      });
    },
    handel() {
      if (this.editObject.hitchDescription) {
        this.keyList = this.editObject.hitchDescription.split(",");
      }
    },
    save() {
      // 修改关键字
      let params = {
        hitchInfoCode: this.editObject.hitchInfoCode,
        hitchDescription: this.keyList?.toString()
      };
      faultKeyManageApi.editKeyWords(params).then(res => {
        if (res.code === 1) {
          this.$message.success(res.msg);
          this.$emit("editKeyWords");
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    close() {
      this.$emit("closeDialog");
    },
    cancel() {
      this.$emit("cancelDialog");
      this.keyList = [];
    }
  }
};
</script>

<style lang="scss" scoped>
.key-con {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 0 30px;
}
.key-con-one {
  margin: 5px;
  padding: 5px;
  font-size: 16px;
  color: #fff;
  background-color: #006e91;
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
  border: 1px solid #00fff7;
}
.hang-font {
  width: 100%;
  font-size: 16px;
  text-align: center;
}
.selectWords {
  display: flex;
  align-items: center;
  font-size: 16px;
  margin: 50px 0px;
  .keyw {
    width: 20%;
    text-align: right;
  }
  .keys {
    width: 470px;
  }
}
</style>
